<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>生成3dtiles的json文件</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <!-- <canvas id="canvasTest" width="400" height="400"></canvas> -->
    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<script src=""></script>
<script src='/GiswayEngine.js'></script>

<script src='threeMin.js'></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.min.js"></script> -->
<script type="text/javascript">
    
    var model;
    window.app = new GE.App('mapContainer', {
        position: [120.52950010876321, 30.268289949834518, 1000],
        lookAt: [120.52950010876321, 30.268289949834518, 0],
        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 22,
        ambientLightIntensity: 5,
        ambientLightType: 'hemiSphere',
        useCarpet: true,
        background: "Fog",
        useDefaultTexture: true, //是否使用瓦片默认纹理
        baseLayer: [
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                readableUrl: true,
                tileType: 'image',
            },
        ]
    });

    let geometricError = 20;
    var mergedresultJson = {
        "asset" : 
        {
            "gltfUpAxis" : "Y",
            "version" : "1.0"
        },
        "root" : {
            "boundingVolume" : {box: []}, //"box", "sphere"
            "children" : [],
            "geometricError" : geometricError,
            "transform": []
        }
    };

    let modelUrlArray = [
        'http://localhost:9000/examples/resources/gltf/GLTF/2.gltf',
        'http://localhost:9000/examples/resources/gltf/GLTF/5.gltf',
        'http://localhost:9000/examples/resources/gltf/GLTF/8.gltf',
        'http://localhost:9000/examples/resources/gltf/GLTF/12.gltf',
        'http://localhost:9000/examples/resources/gltf/GLTF/15.gltf',
    ];
    let boxArray = [];

    modelUrlArray.forEach(element => {
        generate3dtiles(element);
    });
   
  
    function generate3dtiles(url) {
        model = new GE.OverLay({
            type: 'gltf', //
            // url: 'http://localhost:9000/examples/resources/fbx/xqazm.fbx',
            // url: 'http://localhost:9000/examples/resources/fbx/FBX/5.FBX',
            // url:'http://192.168.2.43:9000/examples/resources/fbx/box.gltf',
            url: url,
            position: [120.52950010876321, 30.268289949834518, 50],
            changeEmissive: true,
            isComputeBoxFor3dtile: true, //计算3dtiles数据需要的包围盒
            // scale: [100, 100, 100],
            // rotation: [45, 0, 0],
            success: function (overlay) {
                let box = computeBoundingVolume(overlay.children[0]);
                // console.log(box);
                let childJson = {
                                    boundingVolume: {box: box}, 
                                    content: {uri: url}, 
                                    geometricError: geometricError
                                };
                                
                mergedresultJson.root.children.push(childJson);

                if(mergedresultJson.root.children.length == modelUrlArray.length){
                    const mergedBox = new THREE.Box3();

                    // 遍历所有包围盒并将它们合并
                    boxArray.forEach((box) => {
                        mergedBox.union(box);
                    });
                    // console.log(mergedBox);

                    let boundingVolume = getBoundingVolumeBox(mergedBox);
                    mergedresultJson.root.boundingVolume.box = boundingVolume;
                    mergedresultJson.root.transform = transform = [
                        1, 0, 0, 0,
                        0, 1, 0, 0,
                        0, 0, 1, 0,
                        -2175287.3894734886, 4468232.746726356, 3984551.6487376457, 1
                    ];
                    // -2175287.3894734886,
                    // 4468232.746726356,
                    // 3984551.6487376457,
                    
                    console.log(JSON.stringify(mergedresultJson));
                }
            }
        })
        app.add(model);

        window.model = model;
    }

    
    function computeBoundingVolume(object){ //把模型的包围盒计算出来，为生成3dtiles数据做准备
        // 获取Group的包围盒
        let box = new THREE.Box3();
        box = box.expandByObject(object); // 通过Group扩展Box3

        let boundingVolume = getBoundingVolumeBox(box);
        boxArray.push(box);
        
        return boundingVolume;
    }

    function getBoundingVolumeBox(box){
        const center = new THREE.Vector3();
        box.getCenter(center);
       
       let xHalf =  box.max.x - center.x;
       let yHalf = box.max.y - center.y;
       let zHalf = box.max.z - center.z;
       
       let boundingVolumeBox = [
           center.x, center.y, center.z,
           xHalf, 0, 0,
           0, yHalf, 0,
           0, 0, zHalf
       ];
       return boundingVolumeBox;
    }

</script>

</html>